<!--
  单选
-->
<template>
  <div>
    <van-field
      v-model="value"
      readonly
      :label="label"
      :placeholder="placeholder"
      required
      right-icon="arrow"
      @click.stop="showRadio"
    />

    <van-action-sheet v-model="isShowRadio" :actions="RadioOptions" @select="onSelect"></van-action-sheet>
  </div>
</template>
<script>
import { RadioGroup, Radio } from "vant";
export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  props: {
    label: {
      type: String,
      default: "通知类别"
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    //   可供选择的动态数据[对象数组]
    radioOptions: {
      default: [],
      type: Array
    }
  },
  data() {
    return {
      isShowRadio: false,
      value: "",
      RadioOptions: [
        { name: "选项1", id: "333" },
        { name: "选项2", id: "383" },
        { name: "选项3", id: "383" }
      ]
    };
  },
  methods: {
    showRadio() {
      this.isShowRadio = true;
    },
    onSelect(item) {
      this.isShowRadio = false;
      this.value = item.name;
      //this.$emit()
    }
  }
};
</script>